<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<title>文本消息 - 云超市</title>
<link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
<%--<jsp:include page="../../head.jsp"/>--%>
<style type="text/css">

    .row11 {
        margin-top: 40px;
    }


</style>
<div class="row row11" >
    <div class="col-sm-3 col-xs-1" style="text-align: right;font-size: 15px;">内容：</div>
    <div class="col-sm-5 col-xs-8">
        <textarea class="form-control" rows="3" id="charsetContent" placeholder="请输入内容"></textarea>
    </div>
</div>

<div class="row" style="margin-top: 20px;">
    <div class="col-sm-3 col-xs-1" style="text-align: right;font-size: 15px;">发送方：</div>
    <div class="col-sm-5 col-xs-8">
        <select class="form-control" id="faSongFang" >
            <option value="000">小 云</option>
            <%--<option value="005">店铺助手</option>--%>
            <option value="007">大喇叭</option>
            <option value="-66">银叶通</option>
        </select>
        <input placeholder="小云ID" id="cloudlingId"><br>
        <input style="width: 200px;" placeholder="开始用户ID(全部模式发送时可填)" id="firstUserId"><br>
        <input  style="width: 200px;" placeholder="结束用户ID(全部模式发送时可填)" id="endUserId">
    </div>
</div>

<div class="row" style="margin-top: 20px;">
    <div class="col-sm-3 col-xs-1" style="text-align: right;font-size: 15px;">接收方：</div>
    <div class="col-sm-5 col-xs-8">
        <select class="form-control" id="sendType" onchange="changeSendType()">
            <option value="1">全 部</option>
            <option value="2">渠 道</option>
            <option value="3">角 色</option>
            <option value="4">电话号码</option>
        </select>
    </div>
</div>

<div class="row" style="margin-top: 10px;">
    <div class="col-sm-3 col-xs-1" style="text-align: right;font-size: 15px;"></div>
    <div class="col-sm-5 col-xs-8">
        <div class="hide" id="quDaoInputDiv">
            <input type="text" class="form-control" name="quyu" id="quyu" value="" placeholder="点击选择渠道">
            <input type="hidden" id="submitQuDaoId" name="submitQuDaoId"/>
        </div>
        <div class="hide" id="roleInputDiv">
            <select class="form-control" id="characterSelect">
                <option name="characterOption" value="0">--- 请选择角色 ---</option>
                <option name="characterOption" value="002">客户经理</option>
                <option nane="characterOption" value="003">店主</option>
                <option name="characterOption" value="004">普通用户</option>
            </select>
        </div>
        <div class="hide" id="phoneInputDiv">
            <input type="text" class="form-control" name="mobile" id="haracterMobile" value="" placeholder="请输入电话号码,多个电话号码用英文','隔开">
        </div>
    </div>
</div>

<div class="row row11">
    <div class="col-sm-7 col-xs-4" style="text-align: right;font-size: 15px;"></div>
    <div class="col-sm-3 col-xs-4">
        <button style="margin-left: 15px;" class="btn btn-info  btn-sm" id="cBtn" onclick="submitTextMessage()">发送</button>
    </div>
</div>

<!-- 区域选择模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title" id="myModalLabel">请选择渠道</h4>
            </div>
            <div class="modal-body">

                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-xs" onclick="confrimQuDao();">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 渠道选择的值保存在这里 -->
<input type="hidden" id="quDaoId"/>
<input type="hidden" id="quDaoName"/>


<script>
    var scripts = [null, "${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {
            $("#quyu").bind("click", function() {
                $("#myModal").modal("show");
            });
            var setting = {
                check: {
                    enable: true,
                    chkStyle: "radio",
                    radioType: "level"
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: 0,
                    }
                },
                callback: {
                    onCheck: zTreeOnCheck
                },
                /* 	async: {
                 enable: true,
                 dataType: "json",
                 type: "post",
                 contentType: "application/x-www-form-urlencoded",
                 url: "{ctx}/api/cloudling/findChlChannel",
                 autoParam: ["id", "pId" ,"cck"]
                 } */
            };



            var zNodes =[
                { id:-1, pId:0, name:"烟草", cck : 1, open:true},
                /* { id:11, pId:1, name:"随意勾选 1-1", open:true},
                 { id:111, pId:11, name:"随意勾选 1-1-1"},
                 { id:112, pId:11, name:"随意勾选 1-1-2"},
                 { id:12, pId:1, name:"随意勾选 1-2", open:true},
                 { id:121, pId:12, name:"随意勾选 1-2-1"},
                 { id:122, pId:12, name:"随意勾选 1-2-2"}, */
                { id:-2, pId:0, name:"矿泉水", cck : 1, open:false},
                /* { id:21, pId:2, name:"随意勾选 2-1"},
                 { id:22, pId:2, name:"随意勾选 2-2", open:true},
                 { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
                 { id:222, pId:22, name:"随意勾选 2-2-2"},
                 { id:23, pId:2, name:"随意勾选 2-3"}, */
                { id:-3, pId:0, name:"其它", cck : 1, open:false},
            ];

            $.ajax({
                url : "${contextPath}/sys/cloudling/findAllChlChannel",
                type : "get",
                dataType : "json",
                async : false,
                success : function(data) {
                    zNodes = zNodes.concat(data.data);
                }
            });
            var code;
            function setCheck() {
                var type = $("#level").attr("checked")? "level":"all";
                setting.check.radioType = type;
                showCode('setting.check.radioType = "' + type + '";');
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
            function showCode(str) {
                if (!code) code = $("#code");
                code.empty();
                code.append("<li>"+str+"</li>");
            }

            function zTreeOnCheck(event, treeId, treeNode) {

                $("#quDaoId").val(treeNode.id);
                $("#quDaoName").val(treeNode.name );
                //alert($("#quDaoId").val()+ "," + $("#quDaoName").val());
            };

            $(document).ready(function(){
                setCheck();
                $("#level").bind("change", setCheck);
                $("#all").bind("change", setCheck);
            });


        })
    })
</script>

<script src="${contextPath}/static/layer/layer.js"></script>
<script type="text/javascript">
    var changeSendType = function () {
        var value = $("#sendType").val();
        var $quDaoInputDiv = $("#quDaoInputDiv")
        var $roleInputDiv = $("#roleInputDiv")
        var $phoneInputDiv = $("#phoneInputDiv")

        switch (value) {
            case '1' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '2' :
                $quDaoInputDiv.removeClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '3' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.removeClass("hide")
                $phoneInputDiv.addClass("hide")
                break;
            case '4' :
                $quDaoInputDiv.addClass("hide")
                $roleInputDiv.addClass("hide")
                $phoneInputDiv.removeClass("hide")
                break;
            default:
                break;

        }
    }


    function confrimQuDao(){
        var quDaoId = $("#quDaoId").val();
        var quDaoName = $("#quDaoName").val();
        if(quDaoId == null || quDaoId == ""){
            alert("请选择渠道");
            return;
        }
        $("#quyu").val(quDaoName);
        $("#submitQuDaoId").val(quDaoId);
        $("#myModal").modal("hide");
    }


    function submitTextMessage(){

        var html = $("#charsetContent").val().trim();
        if(html==""){
            layer.msg("请输入内容");
            $("#charsetContent").focus();
            return;
        }

        var formData = {};
        formData["faSongFang"] = $("#faSongFang").val();
        formData["content"] = $("#charsetContent").val().trim(); //内容
        var optionValue = $("#sendType").val();
        formData["model"] = optionValue;
        switch (optionValue) {
            case '1':

                break;
            case '2':
                var quDaoId = $("#submitQuDaoId").val();
                if(quDaoId == null || quDaoId == ""){
                    layer.msg("请选择渠道");
                    return;
                }
                formData["quDaoId"] = quDaoId;
                break;
            case '3':
                var role = $("#characterSelect").val();
                if(role==0){
                    layer.msg("请选择要发送的角色");
                    return;
                }
                formData["roleId"] = role;
                break;
            case '4':
                var phone = $("#haracterMobile").val();
                if(phone == null || phone == ""){
                    layer.msg("请输入电话号码");
                    $("#haracterMobile").focus();
                    return;
                }
                var strs= new Array(); //定义一数组
                strs=phone.split(","); //字符分割
                for (var i = 0; i < strs.length; i++ )
                {
                   // alert(strs[i]) //分割后的字符输出
                    if(!(/^1[34578]\d{9}$/.test(strs[i]))) {
                        layer.msg("号码 [ "+strs[i]+" ] 有误，请检查");
                        return;
                    }
                }
                formData["phone"] = phone;
                break;
            default:
                layer.msg("请选择发送模式");
                break;
        }
        formData["type"] = "text";
        formData["cloudId"] = $("#cloudlingId").val();
        formData["firstUserId"] = $("#firstUserId").val();
        formData["endUserId"] = $("#endUserId").val();

        //console.log(formData)
        layer.load(1);
        $.ajax({
            type: 'POST',
            url: '${contextPath}/sys/cloudling/submit',
            data: formData,
            dataType: 'json',
            success: function(data) {
                //alert(data.message);
                layer.closeAll('loading');
                layer.open({
                    title: '提示信息',
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: data.message,
                });
            },
            error: function(result) {
                var message = "未知错误，请联系技术人员"
                if (result.status == 413){
                    message = "发送内容过大，请检查图片和内容";
                }
                if (result.status == 504){
                    message = "发送成功";
                }
                console.error(result);
                //alert("服务器异常，请联系技术人员");
                layer.closeAll('loading');
                layer.open({
                    title: '提示信息',
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: message,
                });
            }
        });

    }

</script>

